<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ扫码绑定登录</title>
    <script type="text/javascript" src="{{ url_for('static',filename='js/jquery.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static',filename='lib/layui/layui.all.js') }}"></script>
    <style>
        body {
            text-align: center;
            font-size: 22px;
        }

        img {
            width: 170px;
        }
    </style>
</head>
<body>
<div><img src="" id="code_img"></div>
<div>QQ扫码绑定登录</div>
<script>
    $(function () {
        get_QRcode();
        var timer = setInterval(function () {
            verify_user(timer)
        }, 3000);
        $('#code_img').on('click', function (event) {
            get_QRcode();
            event.stopPropagation();
        });
    });

    function get_QRcode() {
        $.get('{{ url_for("sys_bp.qqCode") }}', function (data) {
            $('#code_img').attr('src', data.data)
        }, 'json');

    }

    function verify_user(timer) {
        $.get('{{ url_for("sys_bp.bind_code") }}', function (data) {
            if (data.status === 1) {
                get_QRcode()// 重新生成二维码
            }
            else if (data.status === 0) {
                $('#layui-layer1').addClass('layui-hide');
                layer.msg('绑定成功', {icon: 1, time: 2000});
                clearInterval(timer);
                setTimeout(function () {
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                }, 1000);

            } else if (data.status === 3) {
                layer.msg('请前往QQ，确认登录！');
            }
        }, 'json')
    }
</script>
</body>
</html>